import React, { PureComponent } from "react";
import { connect } from "dva";
import { Row, Col,} from "antd";
import GaugeChart from "./GaugeChart";
import BarChart from "./BarChart";
import TableChart from "./TableChart";
import WarnMonitor from "./WarnMonitor";
import Map from "./Map";
import MapOpenLayer from './MapOpenLayer';
import styles from "./Dashboard.less";


@connect()
export default class Dashboard extends PureComponent {
  constructor(props) {
    super(props);

  }

  componentWillUnmount(){
    const { dispatch } = this.props;
    dispatch({
      type: `dashboard/appendClearState`,
    });
    clearInterval(this.timerID);
  }

  componentDidMount() {
    this.getData();
    this.timerID = setInterval(
      () => this.getData(),
      1000*60*2
    );
  }

  getData =() =>{
    const { dispatch } = this.props;
    dispatch({
      type: 'dashboard/fetch_dashboard_map',
    })

    dispatch({
      type: 'dashboard/fetch_dashboard_charts',
    })
  }

  render() {


    return (
      <Row gutter={{ md: 8, lg: 24, xl: 48 }} style={{height:'100%',marginTop:-9}}>
        <Col md={16} style={{height:'100%',paddingRight:0,paddingLeft:15}}>
          <div className={styles.map_contain}>
            <MapOpenLayer />
          </div>
        </Col>
        <Col md={8} style={{height:'100%',position:'relative',paddingRight:15,paddingLeft:15}} >
          <div className={styles.map_contain} style={{background:'none'}}>
            <WarnMonitor/>
            <GaugeChart/>
            <BarChart />
            <TableChart/>
          </div>
        </Col>
      </Row>

    );
  }
}
